<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/elementui/index.css">

    <style>
        .image {
            width: 50%;
            display: block;
        }
        .span {

        }
    </style>
</head>
<body>
<div id="app">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品名称">
            <el-input v-model="formInline.name" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="sizes">
        </el-pagination>
    </div>
    <el-table
            :data="tableData.filter(data => !search || data.pName.toLowerCase().includes(search.toLowerCase()))"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="pNumber"
                label="商品编号" sortable>
        </el-table-column>
        <el-table-column
                fixed
                prop="pName"
                label="商品名称">
        </el-table-column>
        <el-table-column
                label="商品图片">
            <template slot-scope="scope">
                <el-image
                        style="width: 100px; height: 100px"
                        :src="url+scope.row.pImg"
                        fit="contain"></el-image>
            </template>
        </el-table-column>
        <el-table-column
                prop="pAddtime"
                label="添加时间" sortable>
        </el-table-column>
        <el-table-column
                label="商品状态">
            <template slot-scope="scope">
                <span v-if="scope.row.pStatus==1" class="span" style="background-color: #13ce66;color: white">已上架</span>
                <span v-if="scope.row.pStatus==-1" style="background-color: #e53b00;color: white">已下架</span>
            </template>
        </el-table-column>
        <el-table-column
                label="材质" prop="pMaterial">
        </el-table-column>
        <el-table-column
                prop="pPrice"
                label="商品价格">
        </el-table-column>
        <el-table-column
                prop="companyName"
                label="公司">
        </el-table-column>
        <el-table-column
                fixed="right"
                align="right">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入商品名称搜索"/>
                </template>
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="primary"
                        @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-check"></i></el-button>
                <el-button
                        size="mini"
                        type="success"
                        @click="handleShow(scope.$index, scope.row)"><i class="el-icon-chat-line-square"></i></el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog
            :title="productName+product.pName"
            :visible.sync="dialogVisible"
            width="30%">

                <el-card :body-style="{ padding: '0px' }" >
                        <img :src="url+product.pImg" class="image">
                    <div style="padding: 14px;">
                        <p>商品编号：{{product.pNumber}}</p>
                        <p>商品分类：{{product.pEnterprise}}</p>
                        <p>产地：{{product.pLocal}}</p>
                        <p>材质：{{product.pMaterial}}</p>
                        <p>品牌：{{product.pBrand}}</p>
                        <p>价格：{{product.pPrice}}</p>
                        <p>商品质量：{{product.pQuality}}</p>
                        <p>备注：{{product.pRemarks}}</p>
                    </div>
                </el-card>

        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>


    <div class="block">
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page="curr"
                :page-size="pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>

</div>
</body>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                tableData:null,
                formInline: {
                    name: ''
                },
                curr:1, //当前页数
                total:0, //总条数
                pageSize:5,//每页条数
                url:'http://localhost:8888/upload/',
                product:{
                    pName:'',
                    pImg:'',
                    pNumber:'',
                    pEnterprise:'',
                    pLocal:'',
                    pMaterial:'',
                    pBrand:'',
                    pPrice:'',
                    pQuality:'',
                    pRemarks:''
                },
                dialogVisible:false,
                dialogAuditVisible:false,
                productName:'商品名称：',
                search: '',
                productManagementStatus:{
                    id:'',
                    pStatus:''
                }
            }
        },
        methods: {
            handleEdit(index, row) {
                this.productManagementStatus.id=row.id;
                this.productManagementStatus.pStatus=row.pStatus;
                if (row.pStatus==-1){
                    this.$confirm('确定要将该商品上架吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '上架成功!'
                        });
                        axios.put("/productManagementStatus",this.productManagementStatus).then(value => {
                            if (value.data.code==1){
                                this.loadPage(this.curr,this.pageSize)
                            }
                        }).catch(error=>{
                            alert("出错啦")
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消上架'
                        });
                    });
                }else {
                    this.$confirm('确定要将该商品下架吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '下架成功!'
                        });
                        axios.put("/productManagementStatus",this.productManagementStatus).then(value => {
                            if (value.data.code==1){
                                this.loadPage(this.curr,this.pageSize)
                            }
                        }).catch(error=>{
                            alert("出错啦")
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消下架'
                        });
                    });
                }
                console.log(index, row);

            },
            handleShow(index, row) {
                axios.get("/productShow?id="+row.id).then(value => {
                    if (value.data.code == 1){
                        this.product = value.data.data;
                    }
                }).catch(error=>alert("出错啦"))
                this.dialogVisible=true;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.loadPage(1,val);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.loadPage(val,this.pageSize);
            },
            onSubmit() {
                axios.get("/productName?productName="+this.formInline.name).then(value => {
                    if (value.data.code == 1){
                        this.tableData = value.data.data.records;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        this.curr = value.data.data.current;
                    }
                }).catch(error=>alert("出错啦"))
            },
            loadPage(current,pageSize){
                this.curr=current;
                //查询商品
                axios.get("/productsManagement?curr="+current+"&pageSize="+pageSize).then(value => {
                    if (value.data.code == 1){
                        this.tableData = value.data.data.records;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        this.curr = value.data.data.current;
                    }
                }).catch(error=>alert("出错啦"));
            }

        },
        mounted() {
            this.loadPage(1,5);
        }

    });
</script>
</html>